import { Directive, ElementRef, HostListener, Input, Output, EventEmitter } from '@angular/core';
import { DocsService } from '../../../../../@core/service/docs-service/docs-service.service';
@Directive({
  selector: '[appHide]'
})
export class HideDirective {
  @Input() docid: string;
  @Input() doctype:any;
  @Output() getdocs: EventEmitter<string> = new EventEmitter<string>();

  @HostListener('mouseenter', ['$event.target']) onMouseEnter(ev) {
    // 判断不等于其他且 第一次如果缓存为空或者后台返回data length为空ze则不显示
    if(this.doctype !='其他'&& (this.docsService.get(this.docid) == undefined||this.docsService.get(this.docid).length>0)){
      this.highlight('block');
      this.getdocs.emit(this.docid);
    }
  }

  @HostListener('mouseleave') onMouseLeave(ev) {
    this.highlight('none'); 
  }

  constructor(
    private el: ElementRef,
    private docsService: DocsService) {
    // console.log(el);
    // el.nativeElement.style.backgroundColor = 'blue';
  }

  private highlight(hide: string) {
    this.el.nativeElement.getElementsByClassName('hover-card')[0].style.display = hide;
  }

}
